<template>
	<view class="app-container"  :style="{height: `calc(100vh - ${getHeight}px)`}">
		<view class="user">
			<view class="avatar">
				<u-image :src="$userInfo.avatar" mode="widthFix" width="50px" height="50px" shape="circle"></u-image>
			</view>
			<view class="name">
				<view class="text">
					用户名
				</view>
				<view class="desc">
					点击头像可编辑个人资料
				</view>
			</view>
		</view>
		<view class="row-a1">
			<view class="con-a1">
				<view class="name">
					<view class="text">
						{{ $userInfo.role == 2? '教师账号':'学生账号'}}
					</view>
					<view class="tips">
						{{ $userInfo.role == 2? '可以创建和管理课程':'可以预约和参加课程'}}
					</view>
				</view>
				<view class="poster">
					<view class="text" v-if="$userInfo.role == 2">
						申请成为老师
					</view>
					<view class="con" v-else>
						<view class="icon">
							<u-icon name="photo-fill" color="#fff">

							</u-icon>
						</view>
						<view class="text" @click="go('/pages/addClass/index')">
							约课海报
						</view>
					</view>
				</view>
			</view>
			<view class="con-a2">
				<view class="item">
					<view class="data">
						2
					</view>
					<view class="txt">
						我的课程
					</view>
				</view>
				<view class="item">
					<view class="data">
						5
					</view>
					<view class="txt">
						{{ $userInfo.role == 2? '学生数量':'已完成'}}
					</view>
				</view>
				<view class="item">
					<view class="data success">
						{{ $userInfo.role == 2? '¥12500':'12'}}
					</view>
					<view class="txt">
						{{ $userInfo.role == 2? '收益':'总积分'}}
					</view>
				</view>
				<view class="item">
					<view class="data">
						12
					</view>
					<view class="txt">
						{{ $userInfo.role == 2? '评分':'上课'}}
					</view>
				</view>
			</view>
		</view>
		<view class="row-a2" v-if="$userInfo._id">
			<view class="list">
				<view class="li" @click="go('/pages/addClass/index')">
					<view class="left">
						<view class="icon one">
							<u-icon size="24" name="file-text-fill" color="#2966eb"></u-icon>
						</view>
						<view class="text">
							<view class="tit">
								课程管理
							</view>
							<view class="txt">
								查看已预约的课程
							</view>
						</view>
					</view>
					<view class="right">
						<u-icon size="18" name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line></u-line>
				<view class="li" @click="go('/pages/addTeacher/index')">
					<view class="left">
						<view class="icon two">
							<u-icon size="24" name="edit-pen-fill" color="#16a34a"></u-icon>
						</view>
						<view class="text">
							<view class="tit">
								申请成为老师
							</view>
							<view class="txt">
								填写资料申请成为教学老师
							</view>
						</view>
					</view>
					<view class="right">
						<u-icon size="18" name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line></u-line>
				<view class="li" @click="go('/subpackages/pagesA/examineList/index')">
					<view class="left">
						<view class="icon three">
							<u-icon size="24" name="man-add-fill" color="#9333ea"></u-icon>
						</view>
						<view class="text">
							<view class="tit">
								审核管理
							</view>
							<view class="txt">
								审核申请的老师信息
							</view>
						</view>
					</view>
					<view class="right">
						<u-icon size="18" name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line></u-line>
				<view class="li" @click="go('/pages/setting/index')">
					<view class="left">
						<view class="icon four">
							<u-icon size="24" name="setting-fill" color="#ea580c"></u-icon>
						</view>
						<view class="text">
							<view class="tit">
								设置
							</view>
							<view class="txt">
								身份信息切换
							</view>
						</view>
					</view>
					<view class="right">
						<u-icon size="18" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="row-a3">
			<view class="btn" @click="login" v-if="$userInfo._id">
				退出登录
			</view>
			<view class="btn" @click="login" v-else>
				去授权登录
			</view>
		</view>
		<tabbar :name="3"></tabbar>
	</view>
</template>

<script>
	import {
		mapState,mapMutations
	} from "vuex";
	import tabbar from "@/components/tabbar/index.vue";
	export default {
		components: {
			tabbar
		},
		data() {
			return {

			}
		},
		computed: {
			...mapState(['$userInfo']),
			getHeight(){
				return this.$globalVariable.height;
			}
		},
		methods: {
			...mapMutations(['layout']),
			go(page) {
				uni.$u.route({
					url: page
				})
			},
			login(){
				this.layout();
				uni.$u.route({
					url: "/pages/login/index"
				});
			}
		},
		onLoad() {
			
		},
		onShow() {
			console.log(this.$userInfo);
			console.log(this.$store)
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		background-color: #f9fafb;
	}

	.user {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		padding: 40px 20px;
		border-radius: 8px;
		background: #225ae3;
		color: #fff;

		.avatar {
			width: 50px;
			height: 50px;
			margin-right: 20px;
			border: solid 2px #fff;
			border-radius: 50%;
		}

		.name {
			.text {
				margin-bottom: 10px;
				font-weight: bold;
				font-size: 32rpx;
			}
		}
	}

	.row-a1 {
		background-color: #fff;
		margin: -20px 10px 10px 10px;
		padding: 10px;
		border-radius: 8px;

		.con-a1 {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 10px;

			.name {
				.text {
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 5px;
				}

				.tips {
					color: #7e9ac6;
				}
			}

			.poster {
				background-color: #2563eb;
				border-radius: 8px;
				padding: 6px 10px;
				color: #fff;
				font-size: 24rpx;

				.con {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;

					.icon {
						margin-right: 5px;
					}
				}
			}
		}

		.con-a2 {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;

			.item {
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-bottom: 20px;

				.data {
					font-size: 36rpx;
					font-weight: bold;

					&.success {
						color: #16a34a;
					}
				}

				.txt {
					color: #c6c9ca;
				}
			}
		}
	}

	.row-a2 {
		margin: 0 20px;
		margin-bottom: 10px;

		.list {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-radius: 8px;

			.li {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 50px;
				padding: 10px;

				.left {
					display: flex;
					flex-direction: row;
					align-items: center;

					.icon {
						margin-right: 10px;

						padding: 10px;
						border-radius: 8px;

						&.one {
							background: #dbeafe;
						}

						&.two {
							background: #dcfce7;
						}

						&.three {
							background: #f3e8ff;
						}

						&.four {
							background: #eacf8e;
						}
					}
				}

				.right {}
			}
		}
	}

	.row-a3 {
		padding: 10px;

		.btn {
			text-align: center;
			width: 100%;
			font-size: 28rpx;
			background-color: #f3f4f6;
			padding: 10px 0;
			border-radius: 10px;
		}
	}
</style>